<%--
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fintech 注册界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
        body {
            background-color: ghostwhite;
            background-size: cover; /* 背景图片自适应填充整个页面 */
            background-position: center; /* 图片居中 */
            background-repeat: no-repeat; /* 不重复背景图片 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 居中显示 */
            align-items: center;
        }

        .image-container {
            background-image: url('../images/shopping/img4.png'); /* 设置背景图片的路径 */
            padding: 230px;
            width: 360px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .login-container {
            background-color: white;
            padding: 50px;
            width: 360px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .login-container h2 {
            margin-bottom: 30px;
        }

        .login-container .layui-form-item {
            margin-bottom: 20px;
        }

        /* 修改Sign In按钮为黑色 */
        .login-container .layui-btn-black {
            background-color: black;  /* 设置背景颜色为黑色 */
            color: white;  /* 设置文字颜色为白色 */
            border: none; /* 去掉边框 */
        }

        .login-container .layui-btn-black:hover {
            background-color: #333;  /* 悬停时的颜色 */
        }

        .login-container .layui-btn {
            width: 100%;
        }

        .login-container .other-login {
            margin-top: 20px;
            display: flex;
            align-items: center;
        }

        .login-container .other-login hr {
            flex-grow: 1;
            border: none;
            border-top: 1px solid #ddd;
        }

        .login-container .other-login span {
            margin: 0 10px;
            color: #999;
        }

        .login-container .footer {
            margin-top: 20px;
            color: #666;
            font-size: 12px;
        }

        .login-container .footer a {
            color: #1E9FFF;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="image-container"></div>
    <div class="login-container">
        <h2>BUMA store - Register</h2>
        <form class="layui-form" action="register" method="post">
            <div class="layui-form-item">
                <input type="text" name="email" required lay-verify="required" placeholder="Email address" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password" required lay-verify="required" placeholder="Password" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-black" lay-submit>Sign up</button>
            </div>
        </form>
        <div class="footer">
            <a href="login.jsp">Back to login</a><br>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.all.js"></script>
</body>
</html>
--%>


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fintech 注册界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
        body {
            background-color: ghostwhite;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image-container {
            background-image: url('../images/shopping/img4.png');
            padding: 230px;
            width: 360px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .login-container {
            background-color: white;
            padding: 50px;
            width: 360px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .login-container h2 {
            margin-bottom: 30px;
        }

        .login-container .layui-form-item {
            margin-bottom: 20px;
        }

        .login-container .layui-btn-black {
            background-color: black;
            color: white;
            border: none;
        }

        .login-container .layui-btn-black:hover {
            background-color: #333;
        }

        .login-container .layui-btn {
            width: 100%;
        }

        .login-container .footer {
            margin-top: 20px;
            color: #666;
            font-size: 12px;
        }

        .login-container .footer a {
            color: #1E9FFF;
        }

        /* Password strength bar styles */
        .strength-bar {
            margin-top: 10px;
            height: 10px;
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
        }

        .strength-bar-fill {
            height: 100%;
            width: 0;
            background-color: red;
            transition: width 0.5s ease, background-color 0.5s ease;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="image-container"></div>
    <div class="login-container">
        <h2>BUMA store - Register</h2>
        <form class="layui-form" action="register" method="post" onsubmit="return validateForm()">
            <div class="layui-form-item">
                <input type="text" name="username" required lay-verify="required" placeholder="Username" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" id="password" name="password" required lay-verify="required" placeholder="Password" autocomplete="off" class="layui-input" oninput="checkPasswordStrength()">
                <!-- Password strength bar -->
                <div class="strength-bar">
                    <div class="strength-bar-fill" id="strength-bar-fill"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="password" id="confirm_password" required lay-verify="required" placeholder="Confirm Password" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-black" lay-submit>Sign up</button>
            </div>
        </form>
        <div class="footer">
            <a href="login.jsp">Back to login</a><br>
        </div>
        <div class="footer">
            <a style="color: black;">如果用户名重复将重新返回该页面</a><br>
        </div>

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.all.js"></script>
<script>

    // 验证两次密码输入是否一致并检查密码强度
    function validateForm() {
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirm_password").value;

        // Check if passwords match
        if (password !== confirmPassword) {
            alert("Passwords do not match!");
            return false; // 阻止表单提交
        }

        // Check password strength using regex
        var strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
        if (!strongPasswordRegex.test(password)) {
            alert("Password must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, one number, and one special character.");
            return false; // 阻止表单提交
        }

        return true;
    }

    // 实时检查密码强度
    function checkPasswordStrength() {
        var password = document.getElementById("password").value;
        var strengthBarFill = document.getElementById("strength-bar-fill");
        var strength = 0;

        // Check for various conditions
        if (password.length >= 8) strength += 1; // Length
        if (/[a-z]/.test(password)) strength += 1; // Lowercase
        if (/[A-Z]/.test(password)) strength += 1; // Uppercase
        if (/\d/.test(password)) strength += 1; // Number
        if (/[@$!%*?&]/.test(password)) strength += 1; // Special character

        // Adjust bar width and color based on strength
        switch (strength) {
            case 0:
                strengthBarFill.style.width = "0%";
                break;
            case 1:
                strengthBarFill.style.width = "20%";
                strengthBarFill.style.backgroundColor = "red";
                break;
            case 2:
                strengthBarFill.style.width = "40%";
                strengthBarFill.style.backgroundColor = "orange";
                break;
            case 3:
                strengthBarFill.style.width = "60%";
                strengthBarFill.style.backgroundColor = "yellow";
                break;
            case 4:
                strengthBarFill.style.width = "80%";
                strengthBarFill.style.backgroundColor = "yellowgreen";
                break;
            case 5:
                strengthBarFill.style.width = "100%";
                strengthBarFill.style.backgroundColor = "green";
                break;
        }
    }


</script>
</body>
</html>
